<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
    String basePath = request.getContextPath();
%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ExtJs 首页</title>
<link type="text/css" rel="stylesheet" href="<%=basePath %>/ExtJs5/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="<%=basePath %>/ExtJs5/ext-all.js"></script>
<script type="text/javascript" src="<%=basePath %>/ExtJs5/ext-all-debug.js"></script> 
<script type="text/javascript" src="<%=basePath %>/ExtJs5/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script> 
</head>
<body>
<script type="text/javascript">
Ext.onReady(function () {
	var str="成都";
	var store=new Ext.data.JsonStore({
		// store配置
		storeId:'store',
		
		fields: [
	        { name: 'date', type: 'string' },
	        { name: 'high', type: 'string' },
	        { name: 'fengli', type: 'string' },
	        { name: 'low', type: 'string' },
	        { name: 'fengxiang', type: 'string' },
	        { name: 'type', type: 'string' },
	       
	    ],
	    data:{"forecast":[
	    	{"date":"20日星期三","high":"高温 26℃","fengli":"","low":"低温 19℃","fengxiang":"无持续风向","type":"晴"},
	    	{"date":"21日星期四","high":"高温 24℃","fengli":"","low":"低温 19℃","fengxiang":"无持续风向","type":"晴"},
	    	{"date":"22日星期五","high":"高温 23℃","fengli":"","low":"低温 19℃","fengxiang":"无持续风向","type":"晴"},
	    	{"date":"23日星期六","high":"高温 23℃","fengli":"","low":"低温 19℃","fengxiang":"无持续风向","type":"阴"},
	    	{"date":"24日星期天","high":"高温 24℃","fengli":"","low":"低温 21℃","fengxiang":"无持续风向","type":"阴"}
	    ]},
	    proxy: {
	    	type: 'memory',//ajax  memory
	        //url:'http://www.weather.com.cn/data/sk/101270101.html',
	        //url:'http://wthrcdn.etouch.cn/weather_mini?city='+str,
	        reader: {
	            type: 'json',//jsonp解决跨域访问
	            rootProperty: 'forecast'
	        }
	    },
	    //sortInfo: { field: 'IntData', direction: 'DESC' }
	});
	store.load();
	
    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [{
            region: 'north',
            html: '<h1 class="x-panel-header">ExtJs 首页</h1>',
            border: false,
            height: 50,
            margins: '0 0 0 0'
        }, {
            region: 'west',
            collapsible: true,
            split: true,
            id: 'MainMenu',
            title: '系统导航',
            width: 150,
            layout: 'accordion',
            items: [
                {
                    title: '系统菜单',
                    layout: 'fit',
                    items: [{
                    	xtype: 'treepanel',
                        border: 0,
                        rootVisible: false,
                        root: {
                            expanded: false,
                            children: [
                                { id: "101", text: "用户管理", leaf: true, href: '#' },
                                { id: "102", text: "密码修改", leaf: true, href: '#' }
                            ]
                        }
                    }],
                },{
                	title:'菜单2',
                	layout:'fit',
                	items:[{
                		xtype: 'treepanel',
                        border: 0,
                        rootVisible: false,
                        root: {
                            expanded: false,
                            children: [
                                { id: "201", text: "菜单2_01", leaf: true, href: '#' },
                                { id: "202", text: "菜单2_02", leaf: true, href: '#' },
                                { id: "203", text: "菜单2_03", leaf: true, href: '#' },
                            ]
                        }
                	}],
                },{
                	title:'菜单3',
                	layout:'fit',
                	items:[{
                		xtype: 'treepanel',
                        border: 0,
                        rootVisible: false,
                        root: {
                            expanded: false,
                            children: [
                                { id: "301", text: "菜单3_01", leaf: true, href: '#' },
                                { id: "302", text: "菜单3_02", leaf: true, href: '#' },
                                { id: "303", text: "菜单3_03", leaf: true, href: '#' },
                            ]
                        }
                	}],
                },{
                	title:'菜单4',
                	layout:'fit',
                	items:[{
                		xtype: 'treepanel',
                        border: 0,
                        rootVisible: false,
                        root: {
                            expanded: false,
                            children: [
                                { id: "401", text: "菜单4_01", leaf: true, href: '#' },
                                { id: "402", text: "菜单4_02", leaf: true, href: '#' },
                                { id: "403", text: "菜单4_03", leaf: true, href: '#' },
                            ]
                        }
                	}],
                },{
                	title:'菜单5',
                	layout:'fit',
                	items:[{
                		xtype: 'treepanel',
                        border: 0,
                        rootVisible: false,
                        root: {
                            expanded: false,
                            children: [
                                { id: "501", text: "菜单5_01", leaf: true, href: '#' },
                                { id: "502", text: "菜单5_02", leaf: true, href: '#' },
                                { id: "503", text: "菜单5_03", leaf: true, href: '#' },
                            ]
                        }
                	}],
                },{
                	title:'菜单6',
                	layout:'fit',
                	items:[{
                		xtype: 'treepanel',
                        border: 0,
                        rootVisible: false,
                        root: {
                            expanded: false,
                            children: [
                                { id: "601", text: "菜单6_01", leaf: true, href: '#' },
                                { id: "602", text: "菜单6_02", leaf: true, href: '#' },
                                { id: "603", text: "菜单6_03", leaf: true, href: '#' },
                            ]
                        }
                	}],
                },
            ]
            // could use a TreePanel or AccordionLayout for navigational items
        }, {
            region: 'south',
            title: 'Footer',
            collapsible: true,
            html: '状态栏',
            split: true,
            height: 30,
        }, {
            region: 'east',
            title: '在线用户',
            collapsible: true,
            split: true,
            width: 150
        }, {
            region: 'center',
            xtype: 'tabpanel', 
            id: 'MainTabPanel',
            activeTab: 0,  
            items: {
                title: '首页',
                html: '<h2>欢迎使用</h2><input type="button" value="添加新标签" onclick="CreateIframeTab(\'MainTabPanel\',\'101\', \'系统管理\', \'http://www.baidu.com\');" /><div id="div1"></div>'
            }
        }]
    });

    bindNavToTab("MainMenu", "MainTabPanel");
    
    var grid=Ext.create('Ext.grid.Panel', {
	    title: '天气情况',
	    store: Ext.data.StoreManager.lookup('store'),
	    columns: [
	        { header: '日期',  dataIndex: 'date' },
	        { header: '最高温度', dataIndex: 'high' },
	        { header: '风力', dataIndex: 'fengli' },
	        { header: '最低温度',  dataIndex: 'low' },
	        { header: '风向', dataIndex: 'fengxiang' },
	        { header: '天气', dataIndex: 'type' },
	    ],
	    height: 500,
	    width: 600,
	    renderTo: 'div1',
	});
});

function bindNavToTab(accordionId, tabId) {
    var accordionPanel = Ext.getCmp(accordionId);
    if (!accordionPanel) return;

    var treeItems = accordionPanel.queryBy(function (cmp) {
        if (cmp && cmp.getXType() === 'treepanel') return true;
        return false;
    });
    if (!treeItems || treeItems.length == 0) return;

    for (var i = 0; i < treeItems.length; i++) {
        var tree = treeItems[i];

        tree.on('itemclick', function (view, record, htmlElement, index, event, opts) {
            if (record.isLeaf()) {
                // 阻止事件传播
                event.stopEvent();

                var href = record.data.href;

                if (!href) return;
                // 修改地址栏
                window.location.hash = '#' + href;
                // 新增Tab节点
                CreateIframeTab(tabId, record.data.id, record.data.text, href);
            }
        });
    }
}

function CreateIframeTab(tabpanelId, tabId, tabTitle, iframeSrc) {
    var tabpanel = Ext.getCmp(tabpanelId);
    if (!tabpanel) return;  //未找到tabpanel，返回

    //寻找id相同的tab
    var tab = Ext.getCmp(tabId);
    if (tab) { tabpanel.setActiveTab(tab); return; }

    //新建一个tab，并将其添加到tabpanel中
    //tab = Ext.create('Ext.tab.Tab', );
    tab = tabpanel.add({
        id: tabId,
        title: tabTitle,
        closable: true,
        html: '<iframe style="overflow:auto;width:100%; height:100%;" src="' + iframeSrc + '" frameborder="0"></iframe>'
    });
    tabpanel.setActiveTab(tab);
}
</script>
</body>
</html>